<template>
  <div>
    <div class="common_form_search">
      <el-form v-if="showSearch"
        ref="searchForm"
        :label-width="(labelWidth || 80) + 'px'"
        :inline="true"
        :model="searchForm"
      >
        <template v-for="(item, index) in column">
          <el-form-item :key="index" v-if="item.search" :label="item.label">
            <el-input
              v-if="item.search.type == 'input'"
              v-model="searchForm[item.prop]"
              placeholder="请输入"
              clearable
            />
            <el-select
              v-if="item.search.type == 'select'"
              v-model="searchForm[item.prop]"
              placeholder="请输入"
              clearable
            >
              <el-option :label="'请选择'" :value="''"></el-option>
              <el-option v-for="(data,index) in selectMap[item.prop]" :key="index" :label="data.name" :value="data.code"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()"
            >查询</el-button
          >
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="showAdd" style="margin-bottom: 20px">
      <el-button @click="add" type="primary">新增</el-button>
    </div>
    <el-table :data="tableData" border>
      <el-table-column
        v-for="(item, index) in column"
        :key="index"
        align="center"
        v-if="!item.hidden"
        :fixed="item.fixed"
        :prop="item.prop"
        :label="item.label"
        :width="item.width || tableWidth"
      >
        <template slot-scope="scope">
          <slot
            v-if="item.slot"
            :name="item.prop"
            :row="scope.row"
          />
          <span v-else-if="!item.slot && !item.operate">{{
            scope.row[item.prop]
          }}</span>
          <el-button-group v-else>
            <el-button type="primary" @click="update(scope.row)"
              >修改</el-button
            >
            <el-button @click="remove(scope.row)">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <custom-page ref="customPage" :total="total" @getList="getList" />
    <el-dialog
      class="common-dialog"
      height="500"
      :visible.sync="visible"
      title="新增"
    >
      <el-form
        style="height: 500px; overflow-y: auto"
        ref="searchForm"
        :label-width="(labelWidth || 80) + 'px'"
        :inline="true"
        :model="addForm"
      >
        <template v-for="(item, index) in column">
          <el-form-item
            style="width: calc(100% - 40px)"
            :key="index"
            v-if="item.add"
            :label="item.label"
          >
            <div>
              <el-input
                v-if="item.add.type == 'input'"
                v-model="addForm[item.prop]"
                placeholder="请输入"
                clearable
              />
              <el-select
                @change="
                  (e) => {
                    changeSelect(e, item);
                  }
                "
                :multiple="item.add.multiple ? true : false"
                v-if="item.add.type == 'select'"
                v-model="addForm[item.prop]"
              >
                <template v-if="item.add && !item.add.group">
                  <template v-for="(item, index) in selectMap[item.add.prop]">
                    <el-option
                      v-if="item.add && !item.add.group"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </template>
                </template>
                <template v-else>
                  <template v-for="(item, index) in selectMap[item.add.prop]">
                    <el-option-group
                      v-if="item.children"
                      :key="index"
                      :label="item.name"
                    >
                      <el-option
                        v-for="data in item.children"
                        :key="data.value"
                        :label="data.name"
                        :value="data.id"
                      >
                      </el-option>
                    </el-option-group>
                    <el-option
                      v-else
                      :key="item.value"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </template>
                </template>
              </el-select>
              <div v-if="item.add.type == 'upload'">
                <crop-upload
                  show-type="photo"
                  :init-val="addForm[item.prop]"
                  file-size="500K"
                  wrapper-width="95px"
                  wrapper-height="95px"
                  @setVal="(val) => (addForm[item.prop] = val)"
                />
              </div>
              <div v-if="item.add.type == 'editor'" style="height: 300px">
                <textEditorVue
                  @onEditorChange="(val) => (addForm[item.prop] = val)"
                  :placeholder="item.add.placeholder"
                  :containerId="item.prop"
                  :visible="visible"
                  :content="addForm[item.prop]"
                />
              </div>
            </div>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import customPage from "@/components/customPage";
import cropUpload from "@/components/cropUpload";
import textEditorVue from "./wangEditorV2.vue";
export default {
  props: [
    "tableData",
    "column",
    "tableWidth",
    "labelWidth",
    "total",
    "selectMap",
  ],
  components: { customPage, cropUpload, textEditorVue },
  data() {
    return {
      editorConfig: {
        //serverUrl: process.env.VUE_APP_BASE_API + "/config"',
        //**更正代码231109**
        serverUrl: process.env.VUE_APP_BASE_API + "/config",
        UEDITOR_HOME_URL: "/UEditor/",
        //**代码补充231218**
        UEDITOR_CORS_URL: "/UEditor/",
        zIndex: 99999, //设置z轴顺序值，避免工具栏下拉组件被遮挡
      },
      visible: false,
      addForm: this.resetForm("add"),
      searchForm: this.resetForm("search"),
    };
  },
  methods: {
    ok() {
      this.$emit("addFormOk", {
        form: this.addForm,
        done: () => {
          this.visible = false;
        },
      });
    },
    remove(row) {
      this.$emit("remove", row);
    },
    add() {
      this.addForm = this.resetForm("add");
      this.visible = true;
    },
    getAddForm(){
      return JSON.parse(JSON.stringify(this.addForm))
    },
    update(row) {
      this.resetForm("add");
      if (row.product_id) {
        this.addForm["product_id"] = row.product_id;
      }
      for (let key in row) {
        if (this.addForm[key] !== undefined) {
          if (typeof row[key] == "string") {
            let val = row[key].split(",");
            if (val.length > 1) {
              this.addForm[key] = val;
            } else {
              this.addForm[key] = row[key];
            }
          } else {
            this.addForm[key] = row[key];
          }
        }
      }
      this.$emit("beforeUpdate",this.getAddForm());
      this.visible = true;
    },
    resetForm(type) {
      let form = {};
      this.column.forEach((item) => {
        item[type] ? (form[item.prop] = "") : null;
      });
      return form;
    },
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    onEditorReady(quill) {
      console.log("editor ready!", quill);
    },
    // 查询
    search() {
      this.$refs.customPage.page = 1;
      this.getList();
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage;
      this.$emit("getList", {
        params: { page, pageSize, ...this.searchForm },
        flag,
      });
    },
    changeSelect(value, item) {
      this.$emit("changeSelect", {
        value,
        item,
        done: (val) => {
          this.addForm[item.prop] = val;
        },
      });
    },
    // 重置
    reset() {
      this.searchForm = this.resetForm("search");
      this.getList();
    },
  },
  computed:{
    showSearch(){
      let show = false;
      this.column.forEach((item)=>{
          if(item.search){
            show = true
          }
      })
      return show
    },
    showAdd(){
      let show = false;
      this.column.forEach((item)=>{
          if(item.add){
            show = true
          }
      })
      return show
    }
  }
};
</script>

<style lang="scss" scoped>
.common-dialog /deep/ .el-form-item {
  display: flex;
  flex-wrap: wrap;
}
.common-dialog /deep/ .el-form-item__content {
  width: calc(100% - 120px);
}
</style>